<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>缴费记录</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileColor" content="#0e90d2">


    <link rel="stylesheet" href="assets/css/public.css">
    <link rel="stylesheet" href="assets/css/amazeui.min.css">
    <link rel="stylesheet" href="assets/css/app.css">
    <link rel="stylesheet" href="layer/mobile/need/layer.css">

    <style type="text/css">
        .center:first-child {
            margin-top: 25px;
        }

        .center {
            width: 100%;
            margin-top: 71px;
        }

        .record {
            width: 90%;
            margin-left: 5%;
            box-shadow: 1px 1px 10px rgba(253, 135, 67, 0.22);
            border-radius: 10px;
            height: 102px;
            text-align: center;
            margin-bottom: 21px;
        }

        .record > span {
            color: #FD8340;
            font-size: 15px;
            display: block;
            margin-top: 10px;
            letter-spacing: 2px;
        }

        .record > div > div {
            /*text-align: left;*/
            margin-top: 10px;
        }

        .record > div > .left > span {
            color: #666;
            font-size: 15px;
            float: left;
        }

        .record > div > .right > span {
            color: #999;
            font-size: 12px;
            float: right;
        }

        .clear {
            clear: both;
        }
        .top{
            position: fixed;
            top:0;
        }

    </style>

</head>
<body>
<div class="top am-g" style="opacity: 1;">
    <div class=" am-u-sm-12 am-text-center">
        <a href="index.html">
            <img src="assets/i/zuo.png" width="8"></a>
        <span class="center-title">缴费记录</span>
    </div>
</div>
<div class="am-g center " id="index_div">
    <!--<div class="am-u-sm-12 record">-->
    <!--<span>恒大城16栋1504号</span>-->
    <!--<div class="am-u-sm-12 am-padding-0">-->
    <!--<div class="am-u-sm-6 am-padding-0 left">-->
    <!--<span>物业费：<span>100元</span></span>-->
    <!--</div>-->
    <!--<div class="am-u-sm-6 am-padding-0 right">-->
    <!--<span>总计：<span>112元</span></span>-->
    <!--</div>-->
    <!--</div>-->
    <!--<div class="am-u-sm-12 am-padding-0">-->
    <!--<div class="am-u-sm-6 am-padding-0 left">-->
    <!--<span>水费：<span>100元</span></span>-->
    <!--</div>-->
    <!--<div class="am-u-sm-6 am-padding-0 right">-->
    <!--<span>时间：<span>2018-03-28</span></span>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--<div style="clear: both"></div>-->
    <!--<div class="am-u-sm-12 record">-->
    <!--<span>恒大城16栋1504号</span>-->
    <!--<div class="am-u-sm-12 am-padding-0">-->
    <!--<div class="am-u-sm-6 am-padding-0 left">-->
    <!--<span>物业费：<span>100元</span></span>-->
    <!--</div>-->
    <!--<div class="am-u-sm-6 am-padding-0 right">-->
    <!--<span>总计：<span>112元</span></span>-->
    <!--</div>-->
    <!--</div>-->
    <!--<div class="am-u-sm-12 am-padding-0">-->
    <!--<div class="am-u-sm-6 am-padding-0 left">-->
    <!--<span>水费：<span>100元</span></span>-->
    <!--</div>-->
    <!--<div class="am-u-sm-6 am-padding-0 right">-->
    <!--<span>时间：<span>2018-03-28</span></span>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--<div style="clear: both"></div>-->
    <!--<div class="am-u-sm-12 record">-->
    <!--<span>恒大城16栋1504号</span>-->
    <!--<div class="am-u-sm-12 am-padding-0">-->
    <!--<div class="am-u-sm-6 am-padding-0 left">-->
    <!--<span>物业费：<span>100元</span></span>-->
    <!--</div>-->
    <!--<div class="am-u-sm-6 am-padding-0 right">-->
    <!--<span>总计：<span>112元</span></span>-->
    <!--</div>-->
    <!--</div>-->
    <!--<div class="am-u-sm-12 am-padding-0">-->
    <!--<div class="am-u-sm-6 am-padding-0 left">-->
    <!--<span>水费：<span>100元</span></span>-->
    <!--</div>-->
    <!--<div class="am-u-sm-6 am-padding-0 right">-->
    <!--<span>时间：<span>2018-03-28</span></span>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
</div>
<div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-2" >
    <div class="am-modal-dialog" style="border-radius: 10px;">
        <div class="am-modal-hd">
            <a href="javascript: void(0)" class="" style="background: url('assets/i/down.png')no-repeat;height: 30px;width: 30px;display: block;
background-size: 15px;float: right" data-am-modal-close></a>
        </div>
        <div class="am-modal-bd" style="margin-top: 44px;font-size: 16px;color: #333;font-weight: bold" >
            请输入房产信息！
        </div>
    </div>
</div>
</body>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/global.js"></script>
<script src="layer/layer.js"></script>
<script>
    var token = '';  //token
    var page_number = 1;    //当前页数
    var allpage = 1;        //总页数
    /**
     * 获取缴费记录
     */
    function getRecordList() {
        var data = {
            token: sessionStorage.access_token,
            page_number:page_number,
            page_size:6,
        };
        console.log(data);
        $.ajax({
            method: "post",
            data: data,
            url: "/index/order/ajax_payment_records",
            async: false,
            success: function (result) {
                console.log(result);
                if (result.code == -1) {
                    sessionStorage.clear();
                    initGlobalPage();
                    return;
                }
                if(result.code ==0){
                    againToken();
                    return;
                }
                if(result.code == 3){
                    $('#doc-modal-2').modal('open');
                    $('#doc-modal-2').on('opened.modal.amui', function(){
                        sleep(1000);
                        window.history.back(-1);
                    });
                }
                if (result.code == 1) {
                    allpage = result.data.page.totalpage;
                    var html = '';
                    $.each(result.data.list, function (index, value) {
//                     console.log(value);
                        var create_time = formatDate(value.create_time);
                        html += '<div class="am-u-sm-12 record">';
                        html += '<span>' + value.house_property.detail + '</span>';
                        html += ' <div class="am-u-sm-12 am-padding-0">';
                        html += '<div class="am-u-sm-6 am-padding-0 left">';
                        html += '<span>' + "物业费：";
                        html += '<span>' + value.property_charge + "元" + '</span>';
                        html += '</span>';
                        html += '</div>';
                        html += '<div class="am-u-sm-6 am-padding-0 right">';
                        html += '<span>' + "总计：";
                        html += '<span>' + value.money + "元" + '</span>';
                        html += '</span>';
                        html += '</div>';
                        html += '</div>';
                        html += ' <div class="am-u-sm-12 am-padding-0">';
                        html += '<div class="am-u-sm-6 am-padding-0 left">';
                        html += '<span>' + "水费：";
                        html += '<span>' + value.water_charge + "元" + '</span>';
                        html += '</span>';
                        html += '</div>';
                        html += '<div class="am-u-sm-6 am-padding-0 right">';
                        html += '<span>' + "时间：";
                        html += '<span>' + create_time + '</span>';
                        html += '</span>';
                        html += '</div>';
                        html += '</div>';
                        html += '</div>';
                        html += '<div class="clear">' + '</div>'
                    })
                    $(".center").append(html);
                    page_number++;


                }

            },
            error: function () {
                console.log("error");
            }
        })
    }

    /**
     * 滚动事件
     */
    function scrollFn() {
        //真实内容的高度
        var pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight);
        //视窗的高度
        var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
        //隐藏的高度
        var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

        if (pageHeight - viewportHeight - scrollHeight < 20) {  //如果满足触发条件，执行
            if (page_number <= allpage) {
                getRecordList();
//                $(".top").addClass("fixnav");
            }
        }
    }
    function sleep(numberMillis) {
        var now = new Date();
        var exitTime = now.getTime() + numberMillis;
        while (true) {
            now = new Date();
            if (now.getTime() > exitTime)
                return;
        }
    }
    /**
     * 初始化加载
     */
    $(function () {
        initGlobalPage();
        getRecordList();

        $(window).bind("scroll", scrollFn);    //绑定滚动事件
    });
</script>
</html>